<template>
    <div>
        

        <!-- 搜索 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="selectData" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="selectData.nickName" placeholder="请输入关键字" />
                </el-form-item>

                <el-form-item label="角色">
                    <el-select v-model="selectData.role" class="m-2" placeholder="请选择角色" size="large">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option
                            v-for="item in roleList"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格 -->
        <div class="table-wrap" >
            <el-table :data="list" border style="width: 100%">
                <el-table-column  prop="id" label="id" width="180" ></el-table-column>
                <el-table-column prop="nickName" label="昵称" width="180" />
                <el-table-column prop="title" label="角色" width="380" >
                    <template #default="{row}">
                         <el-button v-for="(item,index) in row.role"
                                type="primary"
                                :key="index"
                                link
                                size="small"
                            >
                            {{item.roleName}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" width="380" >
                    <template #default="{row,$index}">
                         <el-button 
                                type="primary"
                                size="small"
                                @click="editInfoDialogOpen(row,$index)"
                            >
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>

        <el-dialog v-model="dialogData.dialogVisible" title="编辑信息" >
            <el-form :model="form">
                <el-form-item label="昵称" label-width="50px">
                    <el-input v-model="dialogData.nickname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色" label-width="50px">
                    <el-select v-model="dialogData.role" multiple class="m-2" placeholder="请选择角色" size="large">
                        <el-option
                            v-for="item in roleList"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId"
                        />
                    </el-select>
                </el-form-item>
            </el-form>


            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogData.dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSubmit"
                    >确认</el-button
                    >
                </span>
            </template>
        </el-dialog>


    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch,ref } from 'vue'
import {getUserList,getRoleList} from "@/request/api"
import {initData, listInt} from "@/assets/typescript/user";


export default defineComponent({
    setup () {
        const data = reactive(new initData());
        let activeIndex:any = -1;
        
        onMounted(()=>{
            queryUserList();
            queryRoleListList();
        })

        const queryUserList = ()=>{
            getUserList().then(res=>{
                data.list = res.data;
                data.userListSave = res.data;
            })
        }
        const queryRoleListList = ()=>{
            getRoleList().then(res=>{
                data.roleList = res.data;
            })
        }

        const onSubmit = ()=>{
            let arr : listInt[] = [];
            if(!data.selectData.nickName&&!data.selectData.role){
                data.list = data.userListSave;
                return
            }
            if(data.selectData.nickName){
                arr = data.list.filter((value:any)=>{
                    return value.nickName.indexOf(data.selectData.nickName)!==-1
                })
            }else{
                arr = data.userListSave
            }
            
            if(data.selectData.role){
                arr = data.list.filter((value)=>{
                    return value.role.find((item)=>item.role===data.selectData.role)
                })
            }
            data.list = arr;
        }
        watch([()=>data.selectData.nickName,()=>data.selectData.role],()=>{
            if(data.selectData.nickName==""&&data.selectData.role===0){
                data.list = data.userListSave
            }
        })

        const editInfoDialogOpen = (row:any,index:number)=>{
            // 项目实战可引用深拷贝
            localStorage.setItem("row",JSON.stringify(row))
            let item:any = localStorage.getItem("row")
            item = JSON.parse(item)
            
            activeIndex = index;
            
            data.dialogData.nickname = item.nickName;
            data.dialogData.role = item.role.map((value:any)=>value.role)
            data.dialogData.dialogVisible = true
        }

        const editSubmit = ()=>{

            // 项目开发为调用接口，这里做静态开发

            let nickname:any = data.dialogData.nickname
            let roleItem:any = [];
            data.dialogData.role.forEach((el:any) => {
                let obj:any = data.roleList.find((item)=>item.roleId==el)
                roleItem.push(obj)
            });

            data.list.forEach((item:any,index:number)=>{
                if(index===activeIndex){
                    item.nickName = nickname,
                    item.role = roleItem
                }
            })
            data.dialogData.dialogVisible = false;

        }

        return {...toRefs(data),onSubmit,editInfoDialogOpen,editSubmit}
    }
})
</script>

<style scoped>

</style>